<template>
  <div class="pay-main">
    <div class="header-pay" >
      <div class="header">
        <span @click="goBack"><van-icon name="arrow-left" /></span>
      </div>
    </div>
    <div class="pay-method">
      <div class="method-card">
        <p class="title">付款方式</p>
        <van-radio-group v-model="radio">
          <p class="title">
          <span class="left">
             <van-icon size="24px" name="paid" />
            <span style="margin: 0 5px;color: #333">余额</span> <i>($1520.00)</i>
          </span>
            <van-radio checked-color="#f89900" icon-size="16px" :name="1"></van-radio>
          </p>
          <p class="title">
          <span class="left">
             <img src="../../assets/image/p11.png" alt="">
            <span style="margin: 0 5px;color: #333">PayPal</span>
            <i class="font-size-12">( 您所在的区域暂时未开通 )</i>
          </span>
            <van-radio checked-color="#f89900" icon-size="16px" :name="2"></van-radio>
          </p>

          <p class="title">
          <span class="left">
            <img src="../../assets/image/p12.png" alt="">
            <span style="margin: 0 5px;color: #333">Visa</span> <i class="font-size-12">( 您所在的区域暂时未开通 )</i>
          </span>
            <van-radio checked-color="#f89900" icon-size="16px" :name="3"></van-radio>
          </p>

          <p class="title">
          <span class="left">
            <img src="../../assets/image/p13.png" alt="">
            <span style="margin: 0 5px;color: #333">Mastercard</span> <i class="font-size-12">( 您所在的区域暂时未开通 )</i>
          </span>
            <van-radio checked-color="#f89900" icon-size="16px" :name="4"></van-radio>
          </p>
        </van-radio-group>

      </div>
    </div>
    <div class="safe"></div>
    <div class="submit-bottom">
      <span>总计：<b>$152.00</b></span>

      <button @click="$router.push('/orderChecked')">支付</button>
    </div>
  </div>
</template>

<script>
export default {
  name: "index",
  data(){
    return{
      radio:1
    }
  },
  methods:{
    goBack(){
      this.$router.go(-1)
    }
  }
}
</script>

<style scoped lang="scss">
.pay-main{
  width: 100%;
  min-height: 100vh;
  background: #f6f6f6;
  .header-pay{
    width: 100%;
    height: 250px;
    background: url('../../assets/image/bgk.png') center center / 100% 100% no-repeat;
    .header{
      width: 100%;
      height: 40px;
      display: flex;
      padding: 3%;
      box-sizing: border-box;
      justify-content: space-between;
      span{
        color: #fff;
        img{
          height: 16px;
        }
      }
    }
    .shop-nav{
      width: 100%;
      height: 80px;
      position: relative;
      margin-top: 20px;
      .left{
        width: 100%;
        height: 80px;
        font-size: 18px;
        color: #fff;
        display: flex;
        padding: 3%;
        box-sizing: border-box;
        img{
          height: 60px;
          width: 60px;
          border-radius: 50%;
        }
        P{
          margin-left: 10px;
        }
      }
      .right{
        position: absolute;
        right: 0;
        width: 70px;
        height: 25px;
        background: #002FFF;
        border-top-left-radius: 20px;
        border-bottom-left-radius: 20px;
        font-size: 14px;
        display: flex;
        align-items: center;
        justify-content: center;
        color: #fff;
        top: 30px;
      }
    }
  }
  .pay-method{
    width: 100%;
    padding: 0 4%;
    display: flex;
    justify-content: center;
    box-sizing: border-box;
    margin-top: -50px;
    .method-card{
      width: 100%;
      min-height: 200px;
      background: #fff;
      border-radius: 5px;
      padding: 3%;
      box-sizing: border-box;
     .title{
       width: 100%;
       height: 45px;
       border-bottom: 1px solid #f6f6f6;
       font-size: 14px;
       display: flex;
       align-items: center;
       justify-content: space-between;
       .left{
         color:#f89900;
         font-size: 16px;
         img{
           height: 20px;
         }
         i{
           font-style: normal;

         }
         .font-size-12{
           color: #aaaaaa;
           font-size: 12px;
         }
         span{
           margin: 0 5px;
           b{
             margin-left: 10px;
             color: #002FFF;
           }
         }
       }
      }
      p:last-child{
        border: none;
      }
    }
  }
  .safe{
    width: 100%;
    height: 60px;
  }
  .submit-bottom{
    height: 60px;
    background: #fff;
    position: fixed;
    bottom: 0;
    width: 100%;
    font-size: 16px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 3%;
    box-sizing: border-box;
    span{
      font-size: 16px;
      b{
        color: #f89900;
      }
    }
    button{
      width: 100px;
      height: 35px;
      border: none;
      background: #f89900;
      color: #fff;
      font-size: 14px;
      border-radius: 5px;
    }
  }
}
</style>
